---
title: Flex
---

# Flex

Use the `Flex` component to create flexbox layouts.

```js
import { Flex } from 'theme-ui'
```

```jsx live=true
<Flex>
  <Box p={2} bg="primary" color="white" sx={{ flex: '1 1 auto' }}>
    Flex
  </Box>
  <Box p={2} bg="muted">
    Box
  </Box>
</Flex>
```

<Note>

The `Flex` component is identical to the `Box` component, but with
`display: flex` set. If you need to alter the `display` property, use the `Box`
component instead.

</Note>
